<template>
  <view class="rounded-[32rpx] overflow-hidden relative">
    <uni-swiper-dot
        mode="round"
        :info="carouseList"
        :current="currentIndex"
        :dots-styles="{
						backgroundColor: '#dcdcdc',
						selectedBackgroundColor: '#dcdcdc',
						border:'1px solid #dcdcdc',
						selectedBorder: '1px solid #dcdcdc',
				}"
    >
      <swiper
          :autoplay="true"
          :interval="2000"
          :current="currentIndex"
          @change="onChange"
          class="w-full h-[434rpx] "
      >
        <block v-for="item in carouseList" :key="item">
          <swiper-item @click="jumpToDetail(item)">
            <image
                class="size-full rounded-[32rpx] "
                :src="item"
                mode="aspectFill"
            ></image>
          </swiper-item>
        </block>
      </swiper>
    </uni-swiper-dot>

  </view>
</template>

<script setup>
// import {getCarouseList} from "@/api/carousel";
import {ref} from "vue";

const carouseList = ref([]);
const currentIndex = ref(0);
const onChange = (e) => {
  currentIndex.value = e.detail.current;
};

const fetchData =async () => {
  // const { data } = await getCarouseList();
  const swiperList = ref([
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg",
  "https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg",
]);
  carouseList.value = swiperList
  // console.log(data)
  console.log(carouseList.value)
}
const jumpToDetail=(id)=>{
  // uni.navigateTo({
  //   url:`/pagesBanner/detail?id=${id}`
  // })
}
// 初始化
fetchData();
</script>

<style lang="scss" scoped></style>
